import { MemberKnowledgeResult } from "@/apis/endpoint/model";
import { deleteMyKnowledgedeleteId, postMyKnowledges } from "@/apis/endpoint/my";
import GpContainer from "@/components/GpContainer";
import GpFontIcon from "@/components/GpFontIcon";
import GpNavbar from "@/components/GpNavbar";
import GpVerticelLine from "@/components/GpVerticelLine";
import { NAVIGATION_BASE_LAYOUT } from "@/hooks/useLayout";
import { useNavigationOpacity } from "@/hooks/useNavigationOpacity";
import { dateFormat } from "@/utils/date";
import { Image, Text, View } from "@tarojs/components";
import clsx from "clsx";
import { useEffect, useState } from "react";

export default function Index() {
  const [opacity] = useNavigationOpacity()
  const [navigationHeight, setNavigationHeight] = useState(NAVIGATION_BASE_LAYOUT.navigationHeight + NAVIGATION_BASE_LAYOUT.statusBarHeight)
  const [list, setList] = useState<MemberKnowledgeResult[]>([])
  const filterOptions: IOption<any>[] = [
    { value: 0, label: '全部' },
    { value: false, label: '待配置' },
    { value: true, label: '已配置' }
  ]
  const [filterValue, setFilterValue] = useState(0)
  useEffect(() => {
    searchList(filterValue)
  }, [])
  async function searchList(filter: any) {
    const list = await postMyKnowledges().send()
    setList(
      filter === 0
      ? list
      : list.filter(item => item.isEnable === filter)
    )
  }
  async function handleRemove(item: MemberKnowledgeResult) {
    const { confirm } = await Taro.showModal({
      title: "提示",
      content: "确认要删除吗？"
    })
    if (confirm) {
      await deleteMyKnowledgedeleteId(item.id)
      setList(prev => {
        const next = [...prev]
        const index = next.findIndex(({id}) => id === item.id)
        next.splice(index, 1)
        return next
      })
      Taro.showToast({
        icon: "success",
        title: "删除成功"
      })
    }
  }
  function renderTopFilter() {
    return (
      <View className="flex flex-row justify-between items-center fixed left-0 right-0 px-[32px] py-[28px]"
        style={{top: `${navigationHeight}px`, backgroundColor: `rgba(255, 255, 255, ${opacity})`}}
      >
        <View className="flex flex-row items-start gap-[48px]">
          {
            filterOptions.map(item => (
              <View key={item.value} className="flex flex-col gap-[12px] items-center" onClick={() => {
                if (item.value === filterValue) return
                setFilterValue(item.value)
                searchList(item.value)
              }}>
                <Text className={clsx("text-[28px] leading-[28px]", item.value === filterValue ? "text-theme font-bold" : "text-secondary")}>{item.label}</Text>
                { item.value === filterValue && <GpVerticelLine width={32} height={8} className="rounded-[4px]" /> }
              </View>
            ))
          }
        </View>
        <GpFontIcon name="icon-tianjia2" size={40} className="text-theme"/>
      </View>
    )
  }
  function renderContent() {
    return (
      <View className="box-border">
        <View className="h-[400px] bg-linear-180 from-0% from-[#9DC4FF] to-100% to-[#9DC4FF]/0"></View>
        <View className="flex flex-col gap-[20px] px-[32px] -mt-[92px]">
          {
            list.map(item => (
              <View key={item.id} className="bg-white shadow-[0_0_32px_rgba(46,41,77,0.04)] rounded-[24px] overflow-hidden px-[28px] pt-[40px]">
                <View className="flex flex-row gap-[24px]">
                  <Image src="/static/images/robot/question.png" className="w-[40px] h-[40px] object-cover flex-none" />
                  <Text className="text-[32px] text-primary leading-[40px] font-medium">
                    {item.question}
                  </Text>
                </View>
                <View className="flex flex-row gap-[24px] mt-[20px]">
                  <Image src="/static/images/robot/answer.png" className="w-[40px] h-[40px] object-cover flex-none" />
                  <Text className="text-[28px] text-primary leading-[48px] font-normal">
                    {item.answer}
                  </Text>
                </View>
                <View className="border-t border-solid border-t-[#EEEEEE] flex flex-row justify-between items-center box-border h-[88px] mt-[32px]">
                  <View className="flex flex-row-reverse items-center gap-[16px]">
                    <View className={clsx("px-[16px] h-[40px] leading-[40px] rounded-[20px] text-[24px]", item.isEnable ? "text-[#0DAF7B] bg-[#0DAF7B]/10" : "text-[#496EA9] bg-[#496EA9]/10")}>
                      {item.isEnable ? "已配置" : "待配置"}
                    </View>
                    <Text className="text-third text-[24px] leading-[24px] pl-[64px]">{dateFormat(item.updateTime, "short")} 更新</Text>
                  </View>
                  <View className="flex flex-row items-center gap-[48px]">
                    <GpFontIcon name="icon-bianji" className="text-theme" size={40}/>
                    <GpFontIcon name="icon-shanchu" className="text-theme" size={40} onClick={() => handleRemove(item)}/>
                  </View>
                </View>
              </View>
            ))
          }
        </View>
      </View>
    )
  }
  return (
    <GpContainer className="bg-[#F4F6FC]">
      <GpNavbar
        navigationBarTitleText="AI知识库"
        navigationBarPlaceholder={false}
        navigationBarBackgroundColor={`rgba(255, 255, 255, ${opacity})`}
        onLayout={({statusBarHeight, navigationHeight}) => setNavigationHeight(statusBarHeight + navigationHeight)}
      />
      {renderTopFilter()}
      {renderContent()}
    </GpContainer>
  )
}
